<template>
  <div class="app-container">
    <div class="nav">
      <div class="web-container">
        <el-menu router :default-active="isNavIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
          <el-menu-item index="/">
            <div class="nav-item">
              <i class="nav-icon"></i>首页
            </div>
          </el-menu-item>
          <el-menu-item index="/all">
          <div class="nav-item">
            <i class="nav-icon"></i>全部分类
          </div>
          </el-menu-item>
          <el-menu-item index="/ranklist">
          <div class="nav-item">
            <i class="nav-icon"></i>排行榜
          </div>
          </el-menu-item>
          <el-menu-item v-for="(item,index) in nav" :key="index" :index="item.url">
          <div class="nav-item">
            <i class="nav-icon"></i>{{item.columnName}}
          </div>
          </el-menu-item>
          <el-menu-item index="/events">
          <div class="nav-item">
            <i class="nav-icon"></i>专题活动
          </div>
          </el-menu-item>
        </el-menu>
      </div>
    </div>
  </div>
</template>

<script>
import {getFirstLevel} from '@/api/index'
export default {
  data() {
    return {
      nav:[]
    };
  },
  created: function() {
    if (sessionStorage.getItem("isNavIndex")) {
      this.$store.commit("SET_ISNAVINDEX",sessionStorage.getItem("isNavIndex")
      );
    }
      this.init();
  },
  methods: {
    handleSelect(key) {
      this.$store.commit("SET_ISNAVINDEX", key);
    },
    init(){
      getFirstLevel().then(res=>{
        const nav = res.data.data;
        nav.map((val,index)=>{
          // console.log(val.columnName)
          if(val.resType == "1"){
            val.url= '/book'
            sessionStorage.setItem('BookColumnId',val.columnId)
          }else if(val.resType == "5"){
            val.url= '/periodical'
            sessionStorage.setItem('PeriodicalColumnId',val.columnId)

          }else if(val.resType == "3"){
            val.columnName = "视听"
            val.url= '/videomusic'
            sessionStorage.setItem('VideomusicColumnId',val.columnId)

          }else if(val.resType == "4"){
            val.url= '/newspaper'
            sessionStorage.setItem('NewspaperColumnId',val.columnId)

          }else if(val.resType == "2"){
            val.url= '/read'
            sessionStorage.setItem('ReadColumnId',val.columnId)
          }
        })
        console.log(nav)
        this.nav = nav;
        sessionStorage.setItem('nav',JSON.stringify(nav))
        console.log(this.nav)
      })
    }
  },
  computed: {
    isNavIndex() {
      return this.$store.state.isNavIndex;
    }
  },
  components: {}
};
</script>
<style lang="less" scoped>
.custom-dz {
  .nav {
    color: #fff;
    background: #e93926;
    .el-menu--horizontal {
      background: transparent;
      border: none;
    }
    .el-menu--horizontal > .el-menu-item {
      color: #fff;
      margin-bottom: -5px;
       .nav-item {
        height:calc(100% - 5px);
        border-bottom: 5px solid transparent;
      }
    }
    .el-menu--horizontal > .el-menu-item.is-active {
      // border-bottom: 5px solid #fff;
      background: transparent;
      .nav-item {
        // margin-top: -5px;
        height: calc(100% - 5px);
        border-bottom: 5px solid #fff;
      }
    }
    .el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
      background: #ff9393;
      color: #fff;
    }
    .nav-icon {
      position: relative;
      top: 10px;
      margin: 0 auto;
      width: 44px;
      height: 44px;
      display: block;
      background: url("/static/images_dz/header/nav-icon.png") no-repeat;
      background-position: 0;
    }
  }
}
.nav {
  height: 100px;
  width: 100%;
  line-height: 100px;
  background: #fff;
  user-select: none;
  .el-menu--horizontal {
      border: none;
    }
  .el-menu--horizontal > .el-menu-item {
    font-size: 16px;
    height: 100px;
    // line-height: 100px;
    width: 130px;
    text-align: center;
    border-bottom:none;
    margin-bottom: -5px;
    .nav-item {
        // margin-top: -5px;
        height:calc(100% - 5px);
        border-bottom: 5px solid transparent;
      }
  }
  .el-menu--horizontal > .el-menu-item.is-active {
    border-bottom:none;
    .nav-item {
        // margin-top: -5px;
        height: calc(100% - 5px);
        border-bottom: 5px solid #15c798;
      }
  }
  .nav-icon {
    position: relative;
    top: 10px;
    margin: 0 auto;
    width: 44px;
    height: 44px;
    display: block;
    background: url("/static/images/header/nav-icon.png") no-repeat;
    background-position: 0;
  }
  .el-menu-item:nth-child(2) .nav-icon {
    background-position: -44px 0;
  }
  .el-menu-item:nth-child(3) .nav-icon {
    background-position: -88px 0;
  }
  .el-menu-item:nth-child(4) .nav-icon {
    background-position: -132px 0;
  }
  .el-menu-item:nth-child(5) .nav-icon {
    background-position: -176px 0;
  }
  .el-menu-item:nth-child(6) .nav-icon {
    background-position: -220px 0;
  }
  .el-menu-item:nth-child(7) .nav-icon {
    background-position: -264px 0;
  }
  .el-menu-item:nth-child(8) .nav-icon {
    background-position: -308px 0;
  }
  .el-menu-item:nth-child(9) .nav-icon {
    background-position: -352px 0;
  }
}
</style>


